<template>
  <div class="content-box">
    <e-heading :grade="'1'">数据统计</e-heading>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="课程" name="first">
        <el-row>
          <el-col  :offset="9" :span="7">
             <el-date-picker
               size="small"
              v-model="date"
              type="daterange"
              placeholder="选择日期范围">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-input size="small" v-model="keyword" placeholder="请输入关键词"></el-input>
          </el-col>
          <el-col  :offset="1" :span="3">
            <el-button type="primary-plain"  size="small"> 搜索</el-button>
          </el-col>
        </el-row>
        <div class="grey-title">
          课程数据统计柱状图
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="出勤率"></el-tab-pane>
          <el-tab-pane label="学生人数"></el-tab-pane>
          <el-tab-pane label="开班数量"></el-tab-pane>
          <el-tab-pane label="好评率"></el-tab-pane>
        </el-tabs>
        <ve-histogram :name="'呵呵'" :data="chartData" :settings="chartSettings"></ve-histogram>

        <div class="grey-title">
          数据概况
        </div>
        <el-table
          :data="list">
          <el-table-column
            prop="id"
            label="排名"
            width="70">
          </el-table-column>
          <el-table-column
            prop="teacherName"
            label="教练姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="classNumber"
            label="授课数量">
          </el-table-column>
          <el-table-column
            prop="studentNumber"
            label="学生数量">
          </el-table-column>
          <el-table-column
            prop="classHourCount"
            label="总课时长(时)">
          </el-table-column>
          <el-table-column
            prop="rateOfPrize"
            label="好评率">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="教练" name="second">
        <!--
        <div style="height: 300px;">
          <el-steps direction="vertical" :active="1">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
          </el-steps>
        </div>
        -->
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import VeHistogram from 'v-charts/lib/histogram'
import Mock from 'mockjs'
export default {
  components: {
    VeHistogram
  },
  computed: {},
  data () {
    let Random = Mock.Random
    let data = Mock.mock({
      'list|1-10': [{
        'id|+1': 1,
        'teacherName': Random.cfirst() + '老师',
        'classNumber|1-20': 1,
        'studentNumber|1-60': 1,
        'classHourCount|1-50': 1,
        'rateOfPrize|1-100': 1
      }]
    })
    return {
      value1: [new Date(2017, 9, 10, 8, 40), new Date(2017, 10, 11, 9, 40)],
      value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      radio: 3,
      game: {
        point: 21,
        total: 3,
        win: 2
      },
      visible: true,
      date: '',
      keyword: '',
      activeName: 'first',
      chartData: {
        columns: ['教师名称', '授课数量(门)'],
        rows: [
          {'教师名称': '王老师', '授课数量(门)': 15},
          {'教师名称': '李老师', '授课数量(门)': 12},
          {'教师名称': '何老师', '授课数量(门)': 21},
          {'教师名称': '黄老师', '授课数量(门)': 41},
          {'教师名称': '白老师', '授课数量(门)': 31},
          {'教师名称': '张老师', '授课数量(门)': 71},
          {'教师名称': '周老师', '授课数量(门)': 71},
          {'教师名称': '赵老师', '授课数量(门)': 71},
          {'教师名称': '孙老师', '授课数量(门)': 71}
        ]
      },
      chartSettings: {
        dimension: ['教师名称'],
        metrics: ['授课数量(门)'],
        axisSite: {
          right: ['占比']
        },
        yAxisType: ['KMB', 'percent'],
        yAxisName: ['授课数量(门)'],
        area: true,
        stack: {
          '授课数量(门)': ['授课数量(门)']
        }
      },
      list: data.list
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab)
    },
    handleRdChange (val) {
      console.log(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.grey-title{
  background:#d7d7d7;
  color:#333;
  height: 36px;
  line-height: 36px;
  font-size:16px;
  padding:0 10px;
  margin:10px 0 20px;
}
</style>
<style>
.el-tabs--border-card{
  box-shadow: none;
}
.el-tabs--border-card>.el-tabs__content{
   padding:0;
}
.el-tabs--card .el-tabs__nav .el-tabs__item.is-active{
  border-radius:0;
}
.el-tabs__item.is-active{
  background: #fff;
}
</style>
